<template>
  <div class='imgInfoContainer'>
    <h4>{{imginfo.title}}</h4>
    <div class='subtitle'>
      <div class='time'>发表时间：{{imginfo.add_time | dateFormat}}</div>
      <div class='click'>点击：{{imginfo.click}}</div>
    </div>
    <hr>
    <div class='imgInfowarp'>
      <vue-preview  :slides="imglist"></vue-preview>
    </div>

    <div class='container' v-html="imginfo.content"></div>

    <cmt-box :newID="id"></cmt-box>
  </div>
</template>

<script>
import {api} from '@/common/api'
import comment from '@/components/subComps/comment'

export default {
  data () {
    return {
      id: this.$route.params.id,
      imglist: [],
      imginfo: []
    }
  },
  created () {
    this.gitlist()
    this.getimgInfo()
  },
  methods: {
    gitlist () {
      this.$axios.get(`${api}getthumimages/${this.id}`).then(res => {
        this.imglist = res.data.message
        this.imglist.forEach(element => {
          element.msrc = element.src
          element.w = 600
          element.h = 600
          element.alt = `picture${this.id}`
          element.title = `Image Caption ${this.id}`
        })
      })
    },
    getimgInfo () {
      this.$axios.get(`${api}getimageinfo/${this.id}`).then(res => {
        this.imginfo = res.data.message[0]
      })
    }
  },
  components: {
    'cmt-box': comment
  }
}
</script>

<style lang="scss" >
.imgInfoContainer{
    h4{
      font-size:0.03rem;
      line-height:30px;
    }
    .subtitle{
      display:flex;
      justify-content:space-between;
      -webkit-display:flex;
      -moz-display:flex;
      -ms-display:flex;
      -o-display:flex;
      margin: 10px 20px 0;
    }
    .container{
      font-size:0.026rem;
      text-indent:2em;
      text-align:left;
      line-height:30px;
      letter-spacing:4px;
    }
    .imgInfowarp{
      .my-gallery{
        overflow:hin;
        display:flex;
        display: -webkit-box;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap:wrap;

      }
      figure{
        display: inline-block;
        margin:20px;
        // float:left;
        width:90px;
      }
      img{
        width:100%;
        height:100%;
      }
    }
    .imgInfowarp{
    .my-gallery{
      overflow:hidden;
      display:flex;
      display: -webkit-box;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      -o-flex-wrap: wrap;
      flex-wrap:wrap;

    }
    figure{
      display: inline-block;
      margin:20px;
      // float:left;
      width:90px;
    }
    img{
      width:100%;
      height:100%;
    }
  }
}

</style>
